<template>
  <table class="table">
    <tbody>
      <tr v-for="(metric, index) in metrics" :key="index">
        <td>
          <div class="form-check">
            <label class="form-check-label">
              <input
                class="form-check-input"
                type="checkbox"
                :checked="isChecked(metric.name)"
                @input="toggleMetric(metric.name, $event)"
              />
              <span class="form-check-sign"></span>
            </label>
          </div>
        </td>
        <td>
          <p class="title">{{ metric.name }}</p>
          <p class="text-muted">{{ metric.description }}</p>
        </td>
        <td class="td-actions text-right">
          <button
            type="button"
            rel="tooltip"
            title="编辑指标"
            class="btn btn-info btn-link btn-icon btn-sm"
            @click="editMetric(index)"
          >
            <i class="tim-icons icon-pencil"></i>
          </button>
          <button
            type="button"
            rel="tooltip"
            title="查看详情"
            class="btn btn-success btn-link btn-icon btn-sm"
            @click="viewMetricDetails(index)"
          >
            <i class="tim-icons icon-zoom-split"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    value: Array, // 父组件的 v-model 绑定的数据
  },
  data() {
    return {
      metrics: [
        { name: "核心功能准确性", description: "评估模型在基础任务中的准确性与可靠性，确保核心功能满足用户需求", checked: false },
        { name: "内容安全性评估", description: "检测模型生成有害内容的风险，确保输出符合社会伦理与法律规范", checked: false },
        { name: "隐私保护合规性", description: "验证模型处理用户数据时的隐私保护能力，避免敏感信息泄露并符合数据安全法规要求", checked: false },
        { name: "公平性与包容性检测", description: "分析模型对不同群体的偏见程度，确保输出结果公平无歧视", checked: false },
        { name: "信息真实性验证", description: "量化模型生成虚构或误导性内容的比例，提升输出信息的可信度与事实准确性", checked: false },
        { name: "响应效率与资源消耗", description: "衡量模型生成结果的响应速度及计算资源占用情况，优化用户体验与运行成本", checked: false },
        { name: "抗干扰稳定性测试", description: "测试模型在异常输入、对抗攻击或复杂场景下的稳定表现，保障服务的持续可靠性", checked: false },
      ],
    };
  },
  watch: {
    // 监听父组件传入的值，保持数据同步
    value: {
      immediate: true,
      handler(newVal) {
        this.metrics.forEach((metric) => {
          metric.checked = newVal.includes(metric.name);
        });
      },
    },
  },
  methods: {
    isChecked(name) {
      return Array.isArray(this.value) && this.value.includes(name);
    },
    toggleMetric(name, event) {
      if (!Array.isArray(this.value)) return;
      const checked = event.target.checked;
      let newMetrics = [...this.value];

      if (checked) {
        if (!newMetrics.includes(name)) {
          newMetrics.push(name);
        }
      } else {
        newMetrics = newMetrics.filter((item) => item !== name);
      }

      this.$emit("input", newMetrics); // 更新 v-model
    },
    editMetric(index) {
      console.log("编辑指标:", this.metrics[index].name);
    },
    viewMetricDetails(index) {
      console.log("查看指标详情:", this.metrics[index].name);
    },
  },
};
</script>
